/*
 * @ddescription: 任务收益
 * @Author: along
 * @Date: 2021-06-05
 * @Last Modified by: along
 * @Last Modified time: 2021-06-05
 */
<template>
    <el-dialog
        :visible.sync="showDialog"
        width="640px"
        :title="TYPE == 'add' ? '添加信息' : '编辑信息'"
        :show-close="true"
        class="studentSeconfDialog"
    >
        <div class="__wrap">
            <div
                v-for="(row,index) in dataList"
                :key="index"
                class="__items"
            >
                <div class="__nav">
                    <p class="__nav_title">
                        活动信息{{ index + 1 }}
                    </p>
                    <p
                        v-if="dataList.length > 1"
                        class="__delete"
                        @click="handleDelete(index)"
                    >
                        删除
                    </p>
                </div>
                <div class="__side">
                    <p class="__side_title target">
                        任务类型
                    </p>
                    <el-input
                        v-model="row.task_type"
                        placeholder="请输入任务类型"
                        size="medium"
                        clearable
                        :style="{width: '360px'}"
                    />
                </div>
                <div class="__side">
                    <p class="__side_title target">
                        任务名称
                    </p>
                    <el-input
                        v-model="row.task_title"
                        placeholder="请输入任务名称"
                        size="medium"
                        clearable
                        :style="{width: '360px'}"
                    />
                </div>
                <div class="__side">
                    <p class="__side_title target">
                        任务奖励
                    </p>
                    <el-input
                        v-model="row.task_award_money"
                        placeholder="请输入任务奖励"
                        size="medium"
                        clearable
                        :style="{width: '360px'}"
                    />
                </div>
                <div class="__side">
                    <p class="__side_title target18">
                        实际获得金额
                    </p>
                    <el-input
                        v-model="row.task_actual_money"
                        placeholder="请输入实际获得金额"
                        size="medium"
                        clearable
                        :style="{width: '360px'}"
                    />
                </div>
                <div class="__side">
                    <p class="__side_title">
                        任务领取时间
                    </p>
                    <el-date-picker
                        v-model="row.task_time"
                        type="datetime"
                        size="small"
                        placeholder="选择领取时间"
                        :style="{width: '360px'}"
                    />
                </div>
                <div class="__side">
                    <p class="__side_title target18">
                        奖金到账时间
                    </p>
                    <el-date-picker
                        v-model="row.task_award_time"
                        type="datetime"
                        size="small"
                        placeholder="选择到账时间"
                        :style="{width: '360px'}"
                    />
                </div>
            </div>
            <!-- <div
                class="__add"
                @click="handleAddData()"
            >
                继续添加信息
            </div> -->
        </div>
        <div class="__foot">
            <el-button
                size="medium"
                type="default"
                :style="{width: '120px', marginRight: '32px'}"
                @click="showDialog = false"
            >
                取消
            </el-button>
            <el-button
                size="medium"
                type="primary"
                :style="{width: '120px'}"
                @click="handleConfirmData()"
            >
                确定
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    data () {
        return {
            showDialog: false,
            dataList: [{
                task_type: '',//任务类型
                task_title: '',//任务名称
                task_award_money: '',//任务奖励
                task_actual_money: '',//实际获得金额
                task_time: '',//任务领取时间
                task_award_time: ''//奖金到账时间
            }],
            date: [],
            TYPE: '',//add edit
        };
    },
    mounted () {
    },
    methods: {

        /**
         * @description 打开弹窗
         */
        show (type = 'add', list = []) {
            this.TYPE = type;
            this.showDialog = true;

            if(type == 'add') {
                this.dataList = [{
                    task_type: '',//任务类型
                    task_title: '',//任务名称
                    task_award_money: '',//任务奖励
                    task_actual_money: '',//实际获得金额
                    task_time: '',//任务领取时间
                    task_award_time: ''//奖金到账时间
                }];
            }

            if(type == 'edit') {
                this.dataList = list;
            }
        },

        /**
         * @description 关闭弹窗
         */
        close () {
            this.showDialog = false;
        },

        /**
         * @description 添加信息
         */
        handleAddData () {
            this.dataList.push({
                task_type: '',//任务类型
                task_title: '',//任务名称
                task_award_money: '',//任务奖励
                task_actual_money: '',//实际获得金额
                task_time: '',//任务领取时间
                task_award_time: ''//奖金到账时间
            });
        },

        /**
         * @description 删除
         */
        handleDelete (index) {
            this.dataList.splice(index, 1);
        },

        /**
         * @description 确定提交信息
         */
        handleConfirmData () {
            for(let i=0; i<this.dataList.length; i++) {
                if(!this.dataList[i]['task_type']) {
                    this.$notify({
                        title: '温馨提示',
                        message: '请输入任务类型',
                        duration: 2000,
                        type: 'warning'
                    });
                    return false;
                }
                if(!this.dataList[i]['task_title']) {
                    this.$notify({
                        title: '温馨提示',
                        message: '请输入任务名称',
                        duration: 2000,
                        type: 'warning'
                    });
                    return false;
                }
                if(!this.dataList[i]['task_award_money']) {
                    this.$notify({
                        title: '温馨提示',
                        message: '请输入任务奖励',
                        duration: 2000,
                        type: 'warning'
                    });
                    return false;
                }
                if(!this.dataList[i]['task_actual_money']) {
                    this.$notify({
                        title: '温馨提示',
                        message: '请输入实际获得金额',
                        duration: 2000,
                        type: 'warning'
                    });
                    return false;
                }
                if(this.dataList[i]['task_award_time'] === null || !this.dataList[i]['task_award_time']) {
                    this.$notify({
                        title: '温馨提示',
                        message: '请选择到账时间',
                        duration: 2000,
                        type: 'warning'
                    });
                    return false;
                }
            }

            this.$emit('emit', {
                list: this.dataList,
                type: this.TYPE
            });
            this.close();
        }
    }
};
</script>

<style lang="less" scoped>
.studentSeconfDialog {
    .__wrap {
        display: flex;
        flex-direction: column;
        max-height: 450px;
        overflow: hidden;
        overflow-y: auto;
        margin-left: 64px;
        &::-webkit-scrollbar {
            width: 2px;
        }
        .__items {
            width: 512px;
            display: flex;
            flex-direction: column;
            background: rgba(250, 250, 250, 1);
            border: 1px rgba(238, 238, 238, 1) solid;
            border-radius: 4px;
            margin-bottom: 20px;
            .__nav {
                width: 100%;
                height: 40px;
                display: flex;
                background: rgba(240, 240, 240, 1);
                justify-content: space-between;
                box-sizing: border-box;
                border-bottom: 1px rgba(220, 223, 230, 1) solid;
                padding: 0 24px;
                align-items: center;
                margin-bottom: 24px;
                .__nav_title {
                    color: rgba(51, 51, 51, 1);
                    font-size: 14px;
                }
                .__delete {
                    color: rgba(32, 160, 255, 1);
                    font-size: 14px;
                    cursor: pointer;
                }
            }
            .__side {
                display: flex;
                align-items: center;
                margin-bottom: 24px;
                .__side_title {
                    width: 108px;
                    text-align: right;
                    color: rgba(51, 51, 51, 1);
                    font-size: 14px;
                    margin-right: 10px;
                }
                .target {
                    position: relative;
                    &::before {
                        content: '*';
                        position: absolute;
                        color: rgba(249, 91, 86, 1);
                        font-size: 14px;
                        left: 45px;
                        z-index: 10;
                    }
                }
                .target18 {
                    position: relative;
                    &::before {
                        content: '*';
                        position: absolute;
                        color: rgba(249, 91, 86, 1);
                        font-size: 14px;
                        left: 18px;
                        z-index: 10;
                    }
                }
            }
        }
        .__add {
            width: 512px;
            height: 36px;
            border: 1px rgba(32, 160, 255, 1) dashed;
            border-radius: 4px;
            margin-bottom: 32px;
            text-align: center;
            line-height: 36px;
            color: rgba(32, 160, 255, 1);
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
        }
    }
    .__foot {
        width: 100%;
        height: 77px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top: 1px rgba(220, 223, 230, 1) solid;
    }
}
</style>
<style lang="less">
.studentSeconfDialog {
    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    .el-dialog__body {
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
    }
}
</style>